<template>
  <div class="cartDetail">
    <div class="content" v-for="(item, index) in store.state.cartList" :key="index">
      <!--复选框-->
      <van-checkbox-group v-model="checked"
                          @change="groupChange"
                          ref="checkBoxGroup"
      >
        <div>
          <ListItem :item="item" :handleChange="handleChange"
                    :showCheckBox="true"
          ></ListItem>
        </div>
      </van-checkbox-group>
    </div>

    <van-submit-bar :price="allPrice"
                    class="submit-all"
                    button-text="提交订单"
                    v-if="store.state.isDelete"
                    @submit="onSubmit">
      <van-checkbox v-model="submitChecked" checked-color="#ffc400" @click="chooseAll">全选</van-checkbox>
      <!--      <template #tip>-->
      <!--        你的收货地址不支持配送,<span @click="onClickLink">修改地址</span>-->
      <!--      </template>-->
    </van-submit-bar>

    <div class="buy" v-else>
      <div class="left">
        <van-checkbox v-model="submitChecked" checked-color="#ffc400" @click="chooseAll">全选</van-checkbox>
      </div>
      <div class="delete" @click="handleDelete">删除</div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import {useStore} from "vuex";
import ListItem from "@/components/ListItem/index.vue";
import {Toast} from "vant";
import router from "@/router";

const props = defineProps(['changeShow'])
const store = useStore()
// 勾选得商品列表
const checked = ref([])
const submitChecked = ref(true)
// 选择商品
const handleChange = (value, detail) => {
  store.state.cartList.map(item => {
    if (item.id === detail.name) {
      item.num = value
    }
  })
}

// 全选按钮勾选
const chooseAll = () => {
  if (checked.value.length !== store.state.cartList.length) {
    init();
  } else {
    checked.value = []
  }
}
// 单选
const groupChange = (result) => {
  if (result.length === store.state.cartList.length) {
    submitChecked.value = true
  } else {
    submitChecked.value = false
  }
}
// 提交订单
const onSubmit = () => {
  if (checked.value.length) {
    // 使用pay 向vuex存储选择的值
    store.commit('pay', updateData())
    router.push({path: '/create-order', query: {list: checked.value}})
  } else {
    Toast.fail('请选择商品')
  }
}
// 购物车状态全选
const init = () => {
  checked.value = store.state.cartList.map(item => item.id)
}

const handleDelete = () => {
  // 部分删除
  if (checked.value.length) {
    store.commit('delete', updateData('delete'))
    checked.value = []
    // 购物车没有数据时兜底 展示empty 父子组件传值
    if (!store.state.cartList.length) {
      props.changeShow()
      store.commit('edit', 'delete')
    }
  } else {
    Toast.fail('请选择要删除商品')
  }
  // 全部删除
}

const updateData = (type) => {
  return store.state.cartList.filter(item => {
    return type === 'delete' ? !checked.value.includes(item.id) : checked.value.includes(item.id)
  })
}
// 计算全部商品价格
const allPrice = computed(() => {
  let countList = updateData()
  let sum = 0
  countList.forEach(item => {
    sum += item.num * item.price
  })
  return sum * 100
})

onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
.cartDetail {
  font-size: 14px;
  flex: 1;
  position: relative;
  overflow-y: auto;
  padding: 20px 20px 55px;

  .submit-all {
    position: fixed;
    bottom: 54px;
  }

  .buy {
    position: fixed;
    bottom: 48px;
    right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    height: 50px;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;

    .left {
      display: flex;
      align-items: center;
    }

    .delete {
      color: #fff;
      background-color: #ffc400;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      width: 110px;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
  }

  .content {
    margin: 10px auto;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
  }
}

</style>
